<template>
  <div>
    <div class="repairCard">
      <div class="info" v-for="(item,i) in noRepairManList" :key='i' v-show="!status">
        <div class="numCell">
          <van-cell :border="false" title="设备名称" :value="item.facilityName" value-class='num'></van-cell>
        </div>
        <van-cell title="设备编号" :border="false" :value="item.facilityid"></van-cell>
        <van-cell title="故障发起人" :value="item.submitusername" :border="false"></van-cell>
        <van-cell title="故障内容" :value="item.abromalcontent" :border="false"></van-cell>
        <van-cell title="发起时间" :value="item.starttime" :border="false"></van-cell>
        <van-cell title="状态" value="未认领" :border="false"></van-cell>
        <van-cell is-link="">
          <span class="toRepair" @click="toRepair(i,item.id)">我要维修</span>
          <img src="" slot='right-icon' />
        </van-cell>
      </div>
      <div class="info" v-for="(item,i) in haveRepairManList" :key='i' v-show="status">
        <div class="numCell">
          <van-cell :border="false" title="设备编号" :value="item.facilityid" value-class='num'></van-cell>
        </div>
        <van-cell title="维修单号" :border="false" :value="item.id"></van-cell>
        <van-cell title="设备名称" :border="false" :value="item.facilityName"></van-cell>
        <van-cell title="故障发起人" :value="item.submitusername" :border="false"></van-cell>
        <van-cell title="故障内容" :value="item.abromalcontent" :border="false"></van-cell>
        <van-cell title="发起时间" :value="item.starttime" :border="false"></van-cell>
        <van-cell title='维修员' :value="item.maintanceusername"></van-cell>
        <van-cell title="状态" value="已认领" :border="false"></van-cell>
        <van-cell is-link="">
          <span class="toRepair" @click="toastToFinish(i,item)">确认已维修</span>
          <img src="" slot='right-icon' />
        </van-cell>
      </div>
    </div>
    <van-popup v-model="show">
      <p class="genderTop">维修信息</p>
      <van-field label="更换部件" v-model="part" :border="true" placeholder="请输入更换的部件" required=""></van-field>
      <van-field label="维修内容" required="" type="textarea" rows='3' autosize v-model="content" :border="true"
        placeholder="请输入维修内容"></van-field>
      <van-button type="primary" color="#62cff9" @click='sureRepair'>确定</van-button>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast
  } from 'vant'
  export default {
    data() {
      return {
        index: 0,
        item: {},
        content: '',
        part: '',
        noRepairManList: [],
        haveRepairManList: [],
        show: false,
        repairList: [{
            number: 'v201',
            name: '卸料阀',
            publishUser: '张三',
            reason: '年久未修',
            time: '2019-10-12',
            status: '待维修'
          },
          {
            number: 'v202',
            name: '卸料阀',
            publishUser: '李四',
            reason: '年久未修',
            time: '2019-10-12',
            status: '待维修'
          }
        ]
      }
    },
    created() {
      this.getAllInfo()
    },
    methods: {
      getAllInfo() {
        this.$axios.post('/Maintenance/selectAllMaintenance.do').then(res => {
          if (res.data.status === 200) {
            let newData = res.data.msg
            let userName = JSON.parse(localStorage.cksLoginInfo).userName
            let userId = JSON.parse(localStorage.cksLoginInfo).id
            newData.map((value, index) => {
              if (value.state === 1) {
                this.noRepairManList.push(value)
              } else if (value.state === 2 && (value.maintenanceuserid == userId || value.maintanceusername ==
                  userName)) {
                this.haveRepairManList.push(value)
              }
            })
            console.log(this.haveRepairManList)
            if (!this.status && this.noRepairManList.length === 0) {
              Toast.fail({
                message: '暂无异常设备'
              })
            } else if (this.statua && this.haveRepairManList.length === 0) {
              Toast.fail({
                message: '暂无未完成任务'
              })
            }
            /* if(this.noRepairManList.length === 0){
            	Toast.fail({message:'暂无异常设备'})
            } */
          }

        })
      },
      //确定完成维修
      sureRepair() {
        if(!this.part||!this.content) return Toast({message:'请输入完整信息',duration:900})
        console.log(this.item.id)
        this.show = false
        this.$axios.post('/Maintenance/finishMaintenance.do', {
          id: this.item.id,
          facilityid: this.item.facilityName,
          content: this.content,
          parts: this.part,
          versionNumber: this.item.versionNumber
        }).then(res => {
          if (res.data.status === 200) {
            Toast.success({
              message: '完成维修',
              duration: 1000
            })
            this.haveRepairManList.splice(this.i, 1)
            this.$forceUpdate()
          }else{
            Toast({message:'保存失败',duration:900})
          }
        }).catch(err=>{
          Toast({message:'保存失败',duration:900})
        })
      },
      //认领
      toRepair(i, id) {
        this.$axios.post('/Maintenance/claimMaintenance.do', {
          id: id
        }).then(res => {
          if (res.data.status === 200) {
            this.noRepairManList.splice(i, 1)
            Toast.success({
              message: '认领成功',
              duration: 1000
            })
            this.$forceUpdate()
          }
        })
      },
      toastToFinish(i, item) {
        this.show = true
        this.part = ''
        this.content = ''
        this.item = item
        this.i = i
        this.repairList.splice(i, 1)
      }
    },
    components: {

    },
    watch:{
      isSearch(newval){
        if(!this.isSearch){
          this.haveRepairManList = []
          this.getAllInfo()
        }
      },
      allInfo(newval){
        this.haveRepairManList = []
         this.haveRepairManList = this.allInfo
      }
    },
    props: ['status','isSearch','allInfo']
  }
</script>

<style scoped="scoped">
  .van-cell__title{
    flex: 0.9;
  }
  .genderTop {
    font-size: .87rem;
    text-align: center;
  }

  .van-popup--center .van-cell {
    color: #333333 !important;
  }

  .van-button {
    float: right;
    border-radius: .4rem;
    line-height: 1.7rem;
    height: 1.7rem;
    margin-top: .7rem;
  }

  .van-popup--center {
    padding-right: .7rem;
    padding-top: .3rem;
    top: 40%;
    border-radius: 8px;
    width: 76%;
    padding-bottom: 1rem;
  }

  .astoast {
    font-size: .86rem;
  }

  .numCell {
    padding-bottom: .5rem;
    border-bottom: 1px solid #EEEEEE;
  }

  .num {
    font-size: .9rem;
    color: #222;
    font-weight: bold;
  }

  .van-cell {
    padding: .3rem 1rem !important;
    color: #969799;
  }

  .repairCard {
    padding: .6rem;
    margin-top: .5rem;
  }

  .info {
    box-shadow: 2px 2px 5px #ADADAD;
    margin-bottom: 1rem;

  }

  .toRepair {
    display: flex;
    justify-content: center;
    border-top: 1px solid #EEEEEE;
    font-size: .8rem;
    color: red;
    padding-top: .5rem;
  }
</style>
